单个的复选框字段。可用来直接替换掉传统的复选框字段。同时也是单选按钮的亲代类。

文字标签

除了标准的字段文字标签属性之外，还可以给复选框设置一个可选的boxLabel，它会显示在复选框的后面。另外，参考Ext.form.CheckboxGroup以了解一种方便地将相关复选框分为一组的方法。

值

复选框的主要值是一个逻辑值，表示着该复选框是否处于选中状态。以下这些值会使复选框处于选中状态：

• •. true

• •. 'true'

• •. '1'

• •. 'on'

任何的其它值都会使得复选框处于未选中状态。

除了主要的逻辑值之外，妳还可以指定一个单独的输入值。当表单被提交时，这个额外的值会被作为参数值提交。如果妳有多个具有相同名字的复选框，那么妳就需要设置这个值了。如果没有指定的话，则会使用on 这个值。

使用示例

Ext.create (' Ext.form.Panel ', {

bodyPadding: 10,

width: 300,

title: 'Pizza Order',

items: [

{

xtype: 'fieldcontainer',

fieldLabel: 'Toppings',

defaultType: 'checkboxfield',

items: [

{

boxLabel : 'Anchovies',

name : 'topping',

inputValue: '1',

id : 'checkbox1'

}, {

boxLabel : 'Artichoke Hearts',

name : 'topping',

inputValue: '2',

checked : true,

id : 'checkbox2'

}, {

boxLabel : 'Bacon',

name : 'topping',

inputValue: '3',

id : 'checkbox3'

}

]

}

],

bbar: [

{

text: 'Select Bacon',

handler: function() {

Ext.getCmp ('checkbox3').setValue(true);

}

},

'-',

{

text: 'Select All',

handler: function() {

Ext.getCmp ('checkbox1').setValue(true);

Ext.getCmp ('checkbox2').setValue(true);

Ext.getCmp ('checkbox3').setValue(true);

}

},

{

text: 'Deselect All',

handler: function() {

Ext.getCmp ('checkbox1').setValue(false);

Ext.getCmp ('checkbox2').setValue(false);

Ext.getCmp ('checkbox3').setValue(false);

}

}

],

renderTo: Ext.getBody ()

});

配置选项